<template>
  <div class='myoffer-body'>
    <p class="title">订单信息</p>
    <div class="info">
      <p v-for="(item, index) in modelData0" :key="index" :class="item.class + ' mb10'">
        <span>{{item.label}}：</span>
        <span :class="item.class1||'color-999'">测试</span>
        <el-input v-if="item.hasinput" :placeholder="'请输入'+item.label"></el-input>
        <span class="ml10 color-999">{{item.unit}}</span>
        <el-upload v-if="item.upload" class="ml10" :action="uploadFileUrl" :limit="1" :on-success="handle" :on-error="handle">
          <el-button type="success" class="bc-green">上传求购文件</el-button>
        </el-upload>
      </p>
    </div>

    <p class="title mt10">求购信息</p>
    <div class="shop-info">
      <p v-for="(item, index) in modelData1" :key="index" :class="item.class">
        <span>{{item.label}}：</span>
        <img v-if="item.hasimg" :src="imgs.c_logo" alt="">
        <span class="color-999">暂无</span>
      </p>

      <div class="shop-goods">
        <span>求购内容：</span>
        <div class="table-box">
          <el-table :data="[{test:'100'}]" border style="width: 100%">
            <el-table-column v-for="(item, index) in modelData2" :key="index" align="center" :label="item.label" prop="test"></el-table-column>
          </el-table>
        </div>
      </div>
      
      <div class="remark mb10">
        <span>备注：</span>
        <p>
          党和国家机关通用公文的种类国务院办公厅曾发布的《国家行政机关公文处理办法》，经过多年的实践，修订后的《办法》从1994年1月1日起施行。把公文种类调整为十二类十三种，删去“指令”、“决议”、“布告”三个文种，将“议案”作为一个新文种列入主要公文种类。即：命令（令），议案，决定，指示，公告，通告，通知，通报，报告，请示，批复，函，会议纪要。此外，中共中央办公厅于1989年4月25日发布的《中国共产党各级领导机关文件处理条例（试行）》中，正式文件的种类里还列有公报、条例、规定三个文种。这样，现在常用的公文种类总共有十六种。
        </p>
      </div>
      <p><span>报价时限：</span><span class="color-999"></span></p>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      uploadFileUrl:"",
      imgs:{
        c_logo:require('@/assets/imgs/center/c_logo.png'),
      },
      modelData0:[
        {prop:"",label:"报价状态",hasinput:false},
        {prop:"",label:"商品报价",hasinput:true,unit:"元",upload:true},
        {prop:"",label:"运费",hasinput:true,unit:"元"},
        {prop:"",label:"税点",hasinput:true},
        {prop:"",label:"税费",hasinput:false,unit:"元"},
        {prop:"",label:"交易周期",hasinput:true,},
        {prop:"",label:"报价时间",hasinput:false,},
        {prop:"",label:"总价",hasinput:false,class:"money-count",class1:"color-red",unit:"元"},
      ],
      modelData1:[
        {prop:"",label:"求购编号"},
        {prop:"",label:"求购状态"},
        {prop:"",label:"买家信息",class:"logo",hasimg:true},
      ],
      modelData2:[
        {prop:"",label:"分类"},
        {prop:"",label:"品名"},
        {prop:"",label:"商品名称"},
        {prop:"",label:"材质"},
        {prop:"",label:"特性"},
        {prop:"",label:"数量/单位"},
        {prop:"",label:"地区"},
      ]
    };
  },
  methods: {
    handle(){
      
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.myoffer-body {
  padding: 15px;

  .title{
    border-left: 2px solid $blue;
    text-indent: 10px;
    line-height: 35px;
    margin-bottom: 5px;
  }
  .info{
    padding-left: 12px;
    font-size: 14px;

    p{
      line-height: 35px;
      display: flex;

      span:nth-child(1){
        display: inline-block;
        min-width: 70px;
        text-align: right;
      }
    }
    .money-count{
      // font-size: 20px;
      // margin: 20px 0;
    }
  }
  .shop-info{
    padding-left: 12px;
    font-size: 14px;
    >p{
      line-height: 35px;
      display: flex;
    }
    .logo{
      line-height: 36px;
      margin-bottom: 10px;

      img{
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      span:nth-of-type(2){
        color: $blue;
        line-height: 36px;
        font-size: 18px;
      }
      .quick-video{
        margin-left: 20px;
        padding: 0 30px;
        border-radius: 30px;
      }
    }
    >div{
      display: flex;

      >p{
        flex: 1;
        overflow-wrap: break-word;
        font-size: 13px;
        color: #666;
      }
    }
    .table-box{
      flex: 1;
      // width: 945px; //有点意思
      margin-bottom: 10px;
      >span{
        display: inline-block;
        width: 70px;
      }
    }
    .remark{
      span{
        display: inline-block;
        width: 70px;
      }
    }
  }
}
</style>